<template>
	<view class="content">
		<view class="tips-item">
			<view class="tips iconfont icon-gantanhao" v-if="remarks"> <text class="txt">认证资料未通过审核!</text></view>
			<view class="tips" style="display: block;" v-if="remarks">未通过原因：<span style="color:red;">{{remarks}}</span>
			</view>
			<view class="tip iconfont icon-gantanhao" v-else>
				<text class="txt">提示：请确保提交材料的真实性，账号仅限本人或本公司使用，否则可能导致你的账号被锁定或承担相应违法违规后果</text>
			</view>
		</view>
		<view class="warn-item" v-if="user.authenticationStatus == 3">
			<view class="tip iconfont icon-gantanhao">
				<text class="txt">资料审核中，暂不可修改。</text>
			</view>
		</view>
		<view class="info-block">
			<view class="form-block">
				<view class="form-label">公司全称</view>
				<view class="form-ctrl">{{comName}}</view>
			</view>
			<view class="upload-title" v-if="user.authenticationStatus == 2||user.authenticationStatus == 4">
				营业执照</view>
			<view class="upload-block" v-if="user.authenticationStatus == 2||user.authenticationStatus == 4">
				<view class="look" @click="openItem(1)">点击查看示例图片</view>
				<image :src="form.upLicense" class="photo" style="width: 340rpx;height: 250rpx;" mode="aspectFill"
					v-if="form.upLicense">
				</image>
				<view class="photo" v-else @click="chooseImage(1)">
					<image :src="imageUrl+'/company_auth/jia.png'" style="width: 150rpx;height: 150rpx;"></image>
				</view>
			</view>
			<view class="upload-block" v-else>
				<view class="title">营业执照</view>
				<view class="look" @click="openItem(2)">点击查看示例图片</view>
				<image :src="userForm.upLicense?userForm.upLicense:imageUrl+'/company_auth/business_license.png'"
					class="photo" @click="showBigImg(userForm.upLicense)" style="width: 340rpx;height: 250rpx;"
					mode="aspectFill">
				</image>
			</view>
			<view class="upload-title" v-if="user.authenticationStatus == 2||user.authenticationStatus == 4">
				招聘委托书</view>
			<view class="upload-block" v-if="user.authenticationStatus == 2||user.authenticationStatus == 4">
				<view class="look" @click="openFile">点击下载招聘委托书模板.docx</view>
				<image style=" width: 340rpx;height: 250rpx;" mode="aspectFill" :src="form.upRecruit" class="photo"
					v-if="form.upRecruit">
				</image>
				<view class="photo" v-else @click="chooseImage(2)">
					<image :src="imageUrl+'/company_auth/jia.png'" style="width: 150rpx;height: 150rpx;"></image>
				</view>
			</view>
			<view class="upload-block" v-else>
				<view class="title">招聘委托书</view>
				<view class="look" @click="openFile">点击下载招聘委托书模板.docx</view>
				<image style=" width: 340rpx;height: 250rpx;" mode="aspectFill" @click="showBigImg(userForm.upRecruit)"
					:src="userForm.upRecruit?userForm.upRecruit:imageUrl+'/company_auth/authorization.png'"
					class="photo">
				</image>
			</view>
			<view class="upload-title" v-if="user.authenticationStatus == 2||user.authenticationStatus == 4">
				身份证照片</view>
			<view class="upload-block1" v-if="user.authenticationStatus == 2||user.authenticationStatus == 4">
				<view class="img-item">
					<image style="height: 200rpx;" mode="aspectFill" @click="chooseImage(3)"
						:src="form.idCardJust?form.idCardJust:imageUrl+'/company_auth/front.png'" class="photo"></image>
					<image style="height: 200rpx;" mode="aspectFill" @click="chooseImage(4)"
						:src="form.idCardBack?form.idCardBack:imageUrl+'/company_auth/opposite.png'" class="photo">
					</image>
				</view>
			</view>
			<view class="upload-block1" v-else>
				<view class="title">身份证照片</view>
				<view class="img-item">
					<image style="height: 200rpx;" mode="aspectFill" @click="showBigImg(userForm.idCardJust)"
						:src="userForm.idCardJust?userForm.idCardJust:imageUrl+'/company_auth/just.png'" class="photo">
					</image>
					<image style="height: 200rpx;" mode="aspectFill" @click="showBigImg(userForm.idCardBack)"
						:src="userForm.idCardBack?userForm.idCardBack:imageUrl+'/company_auth/back.png'" class="photo">
					</image>
				</view>
			</view>
			<view v-if="displayChoose" class="choose-block">
				<view class="choose-content">
					<view class="choose">
						<view class="iconfont icon-guanbi" @click="closeItem"></view>
						<image :src="form.upLicense?form.upLicense:imageUrl+'/company_auth/business_license_sl.png'"
							class="photo">
						</image>
					</view>
				</view>
			</view>
		</view>
		<view @click="handleSave" class="btn" v-if="user.authenticationStatus == 2 || user.authenticationStatus == 4">保存
		</view>
		<!-- <view @click="back" class="btn" v-else>返回</view> -->
	</view>
</template>

<script>
	import {
		validate
	} from '@/util/validate.js'
	import {
		uploadFile
	} from '@/api/file.js'
	import {
		getEnterpriseData,
		addComTwo,
		getComRecruitersByIdApi
	} from '@/api/company.js'
	import {
		mapGetters
	} from 'vuex';
	import {
		getUser
	} from '@/api/user.js'
	export default {
		data() {
			return {
				comName: '',
				remarks: '',
				form: {
					upLicense: '',
					upRecruit: '',
					idCardJust: '',
					idCardBack: '',
				},
				userForm: {
					upLicense: '',
					upRecruit: '',
					idCardJust: '',
					idCardBack: '',
				},
				rules: {
					upLicense: {
						name: '营业执照',
						required: true
					},
					upRecruit: {
						name: '招聘授权书',
						required: true
					},
					idCardJust: {
						name: '身份证人像面',
						required: true
					},
					idCardBack: {
						name: '身份证国徽面',
						required: true
					},
				},
				imageUrl: '',
				displayChoose: false
			}
		},
		methods: {
			openItem() {
				this.displayChoose = true
			},
			closeItem() {
				this.displayChoose = false
			},
			back() {
				uni.navigateBack()
			},
			openFile() {
				uni.downloadFile({
					url: 'https://dunhuang.gshwsc.com/api/file/91885/%E6%8B%9B%E8%81%98%E5%A7%94%E6%89%98%E4%B9%A6.docx',
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							showMenu: true,
							success: function(res) {
								console.log('打开文档成功');
							}
						});
					}
				});
			},
			//点击放大图片
			showBigImg(imgsArray) {
				let arr = [];
				arr.push(imgsArray)
				uni.previewImage({
					current: 0,
					urls: arr //必须是网址路径，否则加载不出来，如：http：或https：
				});
			},
			getEnterprise() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getEnterpriseData({}).then((res) => {
					this.comName = res.comName;
				})
			},
			getComRecruitersById() {
				getComRecruitersByIdApi({}).then((res) => {
					this.userForm = res;
				})
			},
			getUserInfo() {
				getUser({
					type: 2
				}).then((res) => {

					this.remarks = res.remarks

				})
			},
			chooseImage(category) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (e) => {
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						uploadFile(e.tempFilePaths[0]).then((res) => {
							const data = JSON.parse(res.data);
							uni.hideLoading()
							if (data.code == 200) {
								this.showToast('上传成功')
								if (category == 1) {
									this.form.upLicense = data.data
								} else if (category == 2) {
									this.form.upRecruit = data.data
								} else if (category == 3) {
									this.form.idCardJust = data.data
								} else if (category == 4) {
									this.form.idCardBack = data.data
								}
							} else {
								this.showToast(data.msg)
							}
						}).catch((res) => {
							uni.hideLoading()
							this.showToast('上传失败');
						})
					}
				})
			},
			handleSave() {
				if (validate(this.form, this.rules)) {
					addComTwo(this.form).then(() => {
						this.showToast('保存成功', () => {
							this.$store.dispatch('user/getUser')
							uni.redirectTo({
								url: `/page_other/enterprise/authorization/examine`
							})
						})
					})
				}
			}
		},
		computed: {
			...mapGetters(['identity', 'user'])
		},
		onLoad(e) {
			this.imageUrl = this.globalConfig.imageUrl;
			this.getEnterprise()
			if (this.user && (this.user.authenticationStatus == 3 || this.user.authenticationStatus == 9)) {
				this.getComRecruitersById()
			}
			if (this.user && this.user.authenticationStatus == 4) {
				this.getUserInfo()
			}

		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		padding-bottom: 30rpx;
		padding: 30rpx;
		background: #F8F8F8;

		.tips-item {
			display: flex;
			flex-direction: column;
			color: #F4982B;
			background: #FFF0D6;
			padding: 20rpx;
			border-radius: 20rpx;

			.tips {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 20rpx;
				font-size: 24rpx;
			}

			.iconfont {
				font-size: 14px;

				.txt {
					margin-left: 16rpx;
					font-size: 14px;
					line-height: 50rpx;
				}
			}
		}

		.warn-item {
			display: flex;
			flex-direction: column;
			color: #D02E38;
			background: #FFDFE2;
			padding: 20rpx;
			border-radius: 20rpx;
			margin-top: 30rpx;

			.tips {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 20rpx;
				font-size: 24rpx;
			}

			.iconfont {
				font-size: 14px;

				.txt {
					margin-left: 16rpx;
					font-size: 14px;
					line-height: 50rpx;
				}
			}
		}

		.info-block {
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 20rpx;
			padding: 20rpx;

			.form-block {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-top: 20rpx;
				padding-bottom: 0;
				border-bottom: 1px solid #efefef;

				.form-label {
					font-size: 16px;
					margin-bottom: 20rpx;
				}

				.form-ctrl {
					height: 80rpx;
					line-height: 80rpx;
				}
			}

			.upload-title {
				width: 100%;
				padding: 30rpx 0;
			}

			.upload-block {
				width: 100%;
				padding-bottom: 30rpx;
				display: flex;
				flex-direction: column;
				//align-items: center;
				justify-content: center;
				border-bottom: 1px solid #efefef;

				.title {
					margin-top: 30rpx;
					margin-bottom: 20rpx;
				}

				.photo {
					width: 340rpx;
					height: 250rpx;
					background: #efefef;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.look {
					color: #D8030E;
					font-size: 15px;
					margin-bottom: 30rpx;
					//margin-top: 10rpx;
				}

				.upload-tips {
					font-size: 28rpx;
					color: #335DC5;
					margin-top: 20rpx;
				}
			}


			.upload-block1 {
				width: 100%;
				padding-bottom: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					margin-top: 40rpx;
					margin-bottom: 30rpx;
				}

				.img-item {
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					.photo {
						width: 460rpx;
						height: 420rpx;
						background: #efefef;
						border-radius: 20rpx;
						margin-right: 10rpx;
					}

					.photo:last-child {
						margin-right: 0;
					}

					.look {
						color: #D8030E;
						padding: 20rpx 0;
						font-size: 14px;
					}

					.upload-tips {
						font-size: 28rpx;
						color: #335DC5;
						margin-top: 20rpx;
					}
				}
			}

			.choose-block {
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.2);
				z-index: 999;
				width: 100vw;
				height: 100vh;

				.choose-content {
					width: 100%;
					height: auto;
					background: #fff;
					z-index: 9999;
					position: fixed;
					transform: translate(-50%, 0%);
					left: 50%;
					bottom: 30%;
					display: flex;
					flex-direction: column;
					box-shadow: 0 0 10px 0px #dadada;

					.choose {
						width: 100%;
						display: flex;
						flex-direction: column;
						padding: 30rpx;

						.iconfont {
							display: flex;
							justify-content: flex-end;
							margin-bottom: 10rpx;
						}

						.photo {
							display: flex;
							justify-content: center;
						}
					}
				}
			}
		}

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF7626;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}
	}
</style>